<template>
	<el-form :inline="true" :model="formMode" size="small" label-position="right" label-width="90">
		<el-form-item label="唯一标识">
			<el-input v-model="formMode.prop" placeholder="请输入" clearable />
		</el-form-item>
		<el-form-item label="标识名称" v-if="formMode.type != 'input'">
			<el-input v-model="formMode.propName" placeholder="请输入" clearable />
		</el-form-item>
		<el-form-item label="标签名称">
			<el-input v-model="formMode.label" placeholder="请输入" clearable />
		</el-form-item>
		<el-form-item label="默认值">
			<el-input v-model="formMode.modelValue" placeholder="请输入" clearable />
		</el-form-item>
		<el-form-item label="栅格比例">
			<el-input-number :min="1" :max="24" controls-position="right" v-model="formMode.span" placeholder="请输入" clearable />
		</el-form-item>
		<template v-if="formMode.type == 'input'">
			<el-form-item label="前缀">
				<el-input v-model="formMode.prepend" placeholder="请输入" clearable />
			</el-form-item>
			<el-form-item label="后缀">
				<el-input v-model="formMode.append" placeholder="请输入" clearable />
			</el-form-item>
		</template>

		<template v-if="formMode.type == 'upload'">
			<el-form-item label="文件上传数量">
				<el-input v-model="formMode.limit" placeholder="请输入" clearable />
			</el-form-item>
		</template>
		<template v-if="formMode.type == 'remoteSelect'">
			<el-form-item label="字典标识">
				<el-input v-model="formMode.code" placeholder="请输入" clearable />
			</el-form-item>
			<el-form-item label="请求API">
				<el-input v-model="formMode.api" placeholder="请输入" clearable />
			</el-form-item>
			<el-form-item label="过滤参数">
				<el-input v-model="formMode.filterKey" placeholder="请输入" clearable />
			</el-form-item>
			<el-form-item label="过滤名称">
				<el-input v-model="formMode.filterLabel" placeholder="请输入" clearable />
			</el-form-item>
		</template>
		<template v-if="['select', 'remoteSelect'].includes(formMode.type)">
			<el-form-item label="是否多选">
				<el-switch v-model="formMode.multiple" inline-prompt active-text="是" inactive-text="否" />
			</el-form-item>
		</template>

		<el-form-item label="是否必填">
			<el-switch v-model="formMode.required" inline-prompt active-text="是" inactive-text="否" @change="handleChange('rule')" />
		</el-form-item>
		<el-form-item label="必填提示" v-if="formMode.required">
			<el-input v-model="formMode.requiredTip" @change="handleChange('rule')" placeholder="请输入" clearable />
		</el-form-item>
		<el-form-item label="格式校验正则">
			<el-select
				v-model="formMode.ruleRegs"
				@change="handleChange('rule')"
				filterable
				allow-create
				default-first-option
				:reserve-keyword="false"
				placeholder="请输入"
				clearable
			>
				<el-option v-for="item in ruleOptions" :label="item.label" :value="item.id" />
			</el-select>
		</el-form-item>
		<!--  -->
		<el-form-item label="选项设置" label-width="0" v-if="formMode.dicData">
			<el-divider content-position="left">选项设置</el-divider>
			<dynamic v-bind="dictConfig" v-model="formMode.dicData"></dynamic>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useDesign } from '@/stores/design'
import dynamic from '@/components/AplidCrud/src/AplidForm/dynamic.vue'
const store = useDesign()
const { componentIndex, componentList } = storeToRefs(store)

const formMode: any = ref({})

watch(
	() => componentIndex.value,
	(key) => {
		formMode.value = componentList.value[key]?.option || {}
	},
	{
		immediate: true,
	}
)

watch(
	() => formMode.value,
	(val) => {
    console.log(val,'val--dfsdfdsf')
		// store.updateComponent(componentIndex.value, val)
	},
	{ deep: true }
)

const dictConfig = {
	column: [
		{
			label: '名称',
			prop: 'label',
			type: 'input',
		},
		{
			label: '数值',
			prop: 'value',
			type: 'input',
		},
	],
}
const ruleOptions = [
	{
    id:1,
		value: /^(13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9})$|(^(0\d{10})|^(0\d{2}-\d{8}))$/,
		label: '手机号',
	},
	{
     id:2,
		value: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
		label: '身份证号',
	},
	{
     id:3,
		value: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
		label: '统一信用代码',
	},
	{
     id:4,
		value: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
		label: '保留两位小数',
	},
]
// const fileTypeOptions = [
//   {
//     label:'ppt',
//     value:'application/vnd.ms-powerpoint',
//   },
//   {
//     label: 'word',
//     value: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
//   },
// ]

const stringifyJson = (json)=>{
  return JSON.stringify(json, (k, v) => {
    // 将正则对象转换为正则字符串
    if(v instanceof RegExp){
      return v.toString();
    }

    return v;
  });
}


const handleChange = (type) => {
	if (type == 'rule') {
		let rules = []
		if (formMode.value.required) {
			rules.push({
				required: true,
				message: formMode.value.requiredTip,
			})
		}
		if (formMode.value.ruleRegs) {
      const pattern = ruleOptions.find((item) => item.id == formMode.value.ruleRegs)
	 
			rules.push({
				pattern: stringifyJson(pattern.value),
				message: '请输入正确的格式',
			})
		}
		formMode.value.rules = rules
		console.log('输入正则',formMode.value)
	}
}
</script>

<style scoped></style>
